<template>
  <el-dialog
    :model-value="dialogForm.show"
    :title="dialogForm.title"
    :draggable="dialogForm.draggable"
    @close="close(ruleFormRef)"
    width="35%"
  >
    <el-form :model="form" ref="ruleFormRef" :rules="rules">
      <el-form-item
        label="类型名称"
        :label-width="dialogForm.formLabelWidth"
        prop="tname"
      >
        <el-input
          v-model="form.tname"
          autocomplete="off"
          @input="getNameValue"
        />
      </el-form-item>
      
      <el-form-item
        label="类型路径"
        :label-width="dialogForm.formLabelWidth"
        prop="turl"
      >
        <el-input
          v-model="form.turl"
          autocomplete="off"
          @input="getDescValue"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import { ref, reactive } from "vue";
const emit = defineEmits(["getFormData", "changeDialog", "submitForm"]);
const ruleFormRef = ref();
const rules = reactive({
  tname: [{ required: true, trigger: "blur", message: "名称必须填写" }],
  turl: [{ required: true, trigger: "blur", message: "路径必须填写" }],
});
const props = defineProps({
  form: Object,
  dialogForm: Object,
});
//获取名称值
const getNameValue = (val) => {
  emit("getFormData", "tname", val);
};

//获取名称值
const getDescValue = (val) => {
  emit("getFormData", "turl", val);
};

//关闭对话框
const close = (formEl) => {
  formEl.resetFields();
  emit("changeDialog");
};

//提交表单
const submit = () => {
  emit("submitForm");
};


</script>

<style lang="scss" scoped>

</style>
